<template>
  <div>
    <Menu mode="horizontal" :theme="theme1" active-name="1">
      <MenuItem name="1">
        <router-link to="/page1">内容管理</router-link>
      </MenuItem>
      <MenuItem name="2">
        <router-link to="/page2">
          用户管理
        </router-link>
      </MenuItem>
      <Submenu name="3">
        <template slot="title">
          <router-link to="/page3">
            统计分析
          </router-link>
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">
            <router-link to="/page4">
              新增和启动
            </router-link>
          </MenuItem>
          <MenuItem name="3-2">
            <router-link to="/page3">
              活跃分析
            </router-link>
          </MenuItem>
          <MenuItem name="3-3">
            <router-link to="/page3">
              时段分析
            </router-link>
          </MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">
            <router-link to="/page3">
              用户留存
            </router-link>
          </MenuItem>
          <MenuItem name="3-5">
            <router-link to="/page3">
              流失用户
            </router-link>
          </MenuItem>
        </MenuGroup>
      </Submenu>
      <MenuItem name="4">
        <router-link to="/page4">
          综合设置
        </router-link>
      </MenuItem>
      <Button type="primary" @click="addCount">累加计数器click！</Button>
    </Menu>
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme1: "dark"
    };
  },
  methods: {
    addCount() {
      console.log(this.$store.dispatch("addCount"));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
